import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutterlogistics/config/colors.dart';
import 'package:flutterlogistics/config/router_config.dart';
class LoginPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return LoginState();
  }
}

class LoginState extends State<LoginPage> {
  bool _isPasswordLogin = true;
  String _codeCountdownStr = '获取验证码';
  Timer _time;
  int _codeCountdown = 60;

  bool isEnabledSend = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: ColorConst.color_white,
        appBar: AppBar(
          title: Text(
            _isPasswordLogin ? "密码登录" : "短信登录",
            style: TextStyle(
                fontSize: ScreenUtil().setSp(40),
                fontWeight: FontWeight.bold,
                color: ColorConst.color_black),
          ),
          backgroundColor: ColorConst.color_white,
          elevation: 0,
        ),
        body: Container(
          alignment: Alignment.center,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                height: ScreenUtil().setHeight(50),
              ),
              getServerPlatform(),
              SizedBox(
                height: ScreenUtil().setHeight(30),
              ),
              getTextField("请输入手机号", Icons.phone),
              SizedBox(
                height: ScreenUtil().setHeight(30),
              ),
              _isPasswordLogin
                  ? getTextField("请输入密码", Icons.text_format)
                  : getCodeTextFideld(),
              getLoginButton(context),
              SizedBox(
                height: ScreenUtil().setHeight(45),
              ),
              GestureDetector(
                child: Text(
                  _isPasswordLogin ? "验证码登录" : "密码登录",
                  style: TextStyle(
                      fontSize: ScreenUtil().setSp(24), color: Colors.blue),
                ),
                onTap: () {
                  setState(() {
                    _isPasswordLogin = !_isPasswordLogin;
                  });
                },
              )
            ],
          ),
        ));
  }

  getServerPlatform() {
    var textStyle = TextStyle(fontSize: ScreenUtil().setSp(26));
    return InkWell(
      child: Container(
        decoration: BoxDecoration(
            border: Border.all(
              width: 0.5,
              color: ColorConst.color_555,
            ),
            borderRadius:
                BorderRadius.all(Radius.circular(ScreenUtil().setSp(8)))),
        width: double.infinity,
        height: ScreenUtil().setHeight(80),
        margin: EdgeInsets.only(
            left: ScreenUtil().setSp(45), right: ScreenUtil().setSp(45)),
        child: TextField(
          style: textStyle,
          obscureText: _isPasswordLogin,
          decoration: InputDecoration(
              enabled: false,
              contentPadding: EdgeInsets.only(top: ScreenUtil().setSp(40)),
              hintText: "请选择平台",
              hintStyle: textStyle,
              prefixIcon: Icon(
                Icons.data_usage,
                size: 20,
              ),
              border: OutlineInputBorder(borderSide: BorderSide.none)),
        ),
      ),
      onTap: () {
        Navigator.pushNamed(context, routeServerPlatfrom);
      },
    );
  }

  getTextField(String hintText, icon) {
    var textStyle = TextStyle(fontSize: ScreenUtil().setSp(26));
    return Container(
        decoration: BoxDecoration(
            border: Border.all(
              width: 0.5,
              color: ColorConst.color_555,
            ),
            borderRadius:
                BorderRadius.all(Radius.circular(ScreenUtil().setSp(8)))),
        width: double.infinity,
        height: ScreenUtil().setHeight(75),
        margin: EdgeInsets.only(
            left: ScreenUtil().setSp(45), right: ScreenUtil().setSp(45)),
        child: TextField(
          style: textStyle,
          obscureText: _isPasswordLogin,
          decoration: InputDecoration(
              contentPadding: EdgeInsets.only(top: ScreenUtil().setSp(40)),
              hintText: hintText,
              hintStyle: textStyle,
              prefixIcon: Icon(
                icon,
                size: 20,
              ),
              border: OutlineInputBorder(borderSide: BorderSide.none)),
        ));
  }

  ///验证码输入框
  getCodeTextFideld() {
    var textStyle = TextStyle(fontSize: ScreenUtil().setSp(26));
    return Container(
      decoration: BoxDecoration(
          border: Border.all(
            width: 0.5,
            color: ColorConst.color_555,
          ),
          borderRadius:
              BorderRadius.all(Radius.circular(ScreenUtil().setSp(8)))),
      margin: EdgeInsets.only(
          left: ScreenUtil().setSp(45), right: ScreenUtil().setSp(45)),
      height: ScreenUtil().setHeight(75),
      padding: EdgeInsets.only(
          left: ScreenUtil().setSp(20), right: ScreenUtil().setSp(20)),
      child: Row(
        children: <Widget>[
          Expanded(
            child: InkWell(
              child: TextField(
                style: textStyle,
                decoration: InputDecoration(
                    contentPadding:
                        EdgeInsets.only(top: ScreenUtil().setSp(30)),
                    hintText: "请输入验证码",
                    hintStyle: textStyle,
                    border: OutlineInputBorder(borderSide: BorderSide.none)),
              ),
            ),
          ),
          GestureDetector(
            child: Text(
              _codeCountdownStr,
              style: textStyle.apply(color: ColorConst.color_5773ff),
            ),
            onTap: () {
              if (!isEnabledSend) {
                return;
              }
              isEnabledSend = false;
              _time = Timer.periodic(Duration(seconds: 1), (timer) {
                var value = timer.tick;
                setState(() {
                  var count = _codeCountdown - value;
                  _codeCountdownStr = "${count}s";
                  if (count == 0) {
                    timer.cancel();
                    _codeCountdownStr = "重新发送";
                    _codeCountdown = 60;
                    isEnabledSend = true;
                  }
                });
              });
            },
          )
        ],
      ),
    );
  }

  getLoginButton(BuildContext context) {
    return GestureDetector(
      child: Container(
        width: double.infinity,
        height: ScreenUtil().setHeight(80),
        margin: EdgeInsets.only(
            top: ScreenUtil().setSp(35),
            left: ScreenUtil().setSp(45),
            right: ScreenUtil().setSp(45)),
        alignment: Alignment.center,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
              "登录",
              style:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
            )
          ],
        ),
        decoration: BoxDecoration(
            borderRadius:
                BorderRadius.all(Radius.circular(ScreenUtil().setSp(8))),
            color: Colors.blueAccent),
      ),
      onTap: () {
        showCupertinoDialog(
            context: context,
            builder: (childContext) {
              return CupertinoAlertDialog(
                title: Text("提示"),
                content: Text("提示信息"),
                actions: <Widget>[
                  CupertinoDialogAction(
                    isDefaultAction: true,
                    child: Text("确定"),
                    onPressed: () {
                      Navigator.pop(childContext);
                    },
                  )
                ],
              );
            });
      },
    );
  }

  @override
  void dispose() {
    _time?.cancel();
    _time = null;
    super.dispose();
  }
}
